<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="../css/layui.css" />
		<script type="text/javascript" src="../layui.js"></script>
	</head>
	<body>
		<div class="layui-form-item" style="margin-top: 10px; margin-left:10px"> 
		    <form class="layui-form" method="post" onsubmit="return false;">
		    	<label class="layui-form-mid">用户名:</label> 
				<div class="layui-input-inline" style="width:100px;"> 
				    <input type="text" id="txtUserName" name="txtUserName" autocomplete="off" class="layui-input"> 
				</div> 
				<label class="layui-form-mid">起止时间:</label>
				<div class="layui-input-inline" style="width:100px;"> 
				   <input type="text" name="begin" id="begin" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"> 
				</div> 
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width:100px;"> 
				    <input type="text" name="end" id="end" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"> 
				</div> 
				<label class="layui-form-mid">是否锁定:</label>
				<div class="layui-input-inline" style="width:100px;"> 
				    <select id="cc" name="dept"> 
					<option value="">请选择</option> 
					<option value="是">是</option> 
					<option value="否">否</option> 
					</select> 
				</div> 
				<label class="layui-form-mid">排序:</label> 
				<div class="layui-input-inline" style="width:100px;"> 
				    <select id="ord" name="orderBy"> 
					<option value="">请选择</option> 
					<option value="CreateTime">创建时间</option> 
					<option value="LastLoginTime">最后登录时间</option> 
					</select>
				</div> 
				<div class="layui-input-inline" style="width:100px;"> 
				    <button class="layui-btn" id="search" data-type="reload">搜索</button> 
				</div>
			</form> 
		</div>
		<script type="text/html" id="headToolBar">
			<button class="layui-btn layui-btn-sm" lay-event="batch" >批量</button>
			<button class="layui-btn layui-btn-sm" lay-event="createUser">添加新用户</button>
		</script>
		
		<script type="text/html" id="rowToolBar">
			<button class="layui-btn layui-btn-sm" lay-event="updateUser" >
			    <i class="layui-icon layui-icon-edit"></i> 编辑</button>
			<button class="layui-btn layui-btn-sm" lay-event="deleteUser">
				<i class="layui-icon layui-icon-delete"></i> 删除</button>
		</script>
		
		<table class="layui-hide" id="testTable" lay-filter="test">
			
		</table>
		<script>
		layui.use(['layer','table'],function(){
			var layer=layui.layer,
			table=layui.table
			$=layui.$;
			var pData;
			table.render({//渲染
				elem:'#testTable',//根据id找表格
				height:400,
				toolbar:'#headToolBar',
				url:'http://stuapi.ysdjypt.com/api/GetUsersLayUI',
				method:'post',
				where:{'token':'23d66d84-fae1-45d5-bd07-b694662fe579'},//参数
				title:'用户表',
				page:true,//页
				cols:[
					[
						{   field:'LoginName',
							title:'用户名',
							width:80,
							sort:true,
							fixed:'left'
						},{
							field:'ProtectEMail',
							title:'邮箱',
							width:120
						},{
							field:'ProtectMTel',
							title:'手机号',
							width:100,
							align:'center'
						},{
							field:'IsLockout',
							title:'是否锁定',
							width:80,
							align:'center'
						},{
							field:'CreateTime',
							title:'创建时间',
							width:180,
							align:'center'
						},{
							field:'LastLoginTime',
							title:'最后登录时间',
							width:180
						},{
							title:'操作',
							toolbar:'#rowToolBar'
						}
					]
				],
				id:'testReload',
				done:function(res,curr,count){
					pData=res.data;
					}
			});
			active = {
				reload:function(){
					var txtUserName=$('#txtUserName');
					var begin=$('#begin');
					var end=$('#end');
					var isLock=$('#cc');
					var orderBy=$('#ord');
					table.reload('testReload',{
						where:{
						"userName":txtUserName.val(),
						"beginDate":begin.val(),
						"endDate":end.val(),
						"orderBy":orderBy.val(),
						"isLock":isLock.val(),
						'token':'23d66d84-fae1-45d5-bd07-b694662fe579'
						}
					});
				}
			};
			$('#search').on('click',function(){
				var type=$(this).data('type');
				active[type]?active[type].call(this):'';
			});
			//顶部工具栏,toolbar 行内工具栏 tool
			table.on('toolbar(test)',function(data){
				switch (data.event){
					case 'batch':
					    var names = []; 
						for (var i = 0; i < pData.length; i++) { 
							names.push(pData[i].LoginName); 
							} 
							layer.alert(names.join(','));
						break;
					case 'createUser':
					    layer.msg("创建用户"); 
						break;
					default:
						break;
				}
			});
			
			table.on('tool(test)',function(res){
				switch (res.event){
					case 'updateUser':
					    layer.alert('您准备修改'+res.data.LoginName+'的信息');
						//打开弹框 编辑
						break;
					case 'deleteUser':
					    layer.alert('确定删除用户'+res.data.LoginName+'的信息吗？');
						//打开弹框 删除
						break;
					default:
						break;
				}
			});
		});
		</script>
	</body>
</html>
